import React from 'react';
import './index.scss'
import Input from '../Input/index'
import { Droppable } from "react-beautiful-dnd"


function TodoItems(props) {
    const { todoData, addTodo, editTodo } = props

    return (
        <div className='todo-container'>
            <div className='list-title'>todo</div>
            {/* ------------------可拖拽框---------------- */}
            <Droppable droppableId='myTodoList' direction="vertical">
                {(provided) => (
                    <div className='list-body'
                        ref={provided.innerRef}
                        {...provided.droppableProps}>
                        {todoData.map((item, index) => {
                            return (
                                <Input key={item.id} index={index}
                                    data={item} editTodo={editTodo} />
                            )
                        })}
                        {provided.placeholder}
                        {/* -----------------添加项-------------- */}
                        <button className='addTodo' onClick={addTodo}>+</button>
                    </div>
                )}
            </Droppable>
        </div>
    );
}


export default TodoItems;